<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const loading = ref(false)

// 工作台数据
const workbenchData = ref({
  todayVisits: 2153,
  totalVisits: 128795,
  messages: 12,
  todos: 5,
  systemNotice: 3,
  taskProgress: 68
})

// 快捷操作菜单
const quickMenus = [
  { icon: 'el-icon-document-add', name: '新增文章', color: '#409EFF' },
  { icon: 'el-icon-user-solid', name: '用户管理', color: '#67C23A' },
  { icon: 'el-icon-s-tools', name: '系统设置', color: '#E6A23C' },
  { icon: 'el-icon-s-marketing', name: '数据统计', color: '#F56C6C' },
  { icon: 'el-icon-picture', name: '素材管理', color: '#909399' },
  { icon: 'el-icon-chat-line-round', name: '消息中心', color: '#9C27B0' },
]

// 待办事项
const todoList = [
  { id: 1, title: '完成用户管理模块开发', status: false, date: '2023-12-31' },
  { id: 2, title: '修复首页加载速度慢的问题', status: true, date: '2023-12-25' },
  { id: 3, title: '优化移动端适配', status: false, date: '2023-12-28' },
  { id: 4, title: '完善系统权限设计', status: false, date: '2024-01-05' },
  { id: 5, title: '更新产品文档', status: false, date: '2024-01-10' },
]

// 系统公告
const noticeList = [
  { id: 1, title: '系统将于12月31日凌晨2点进行升级维护', date: '2023-12-20' },
  { id: 2, title: '新版本1.2.0发布，新增多项功能', date: '2023-12-15' },
  { id: 3, title: '请及时更新个人账户安全信息', date: '2023-12-10' },
]

// 更改待办状态
const toggleTodoStatus = (todo) => {
  todo.status = !todo.status
}

onMounted(() => {
  loading.value = true
  
  // 模拟获取数据
  setTimeout(() => {
    loading.value = false
  }, 800)
})
</script>

<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="welcome-card">
          <div class="welcome-info">
            <el-avatar :size="64" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            <div class="welcome-text">
              <h2>{{ userStore.username ? `您好，${userStore.username}` : '您好，管理员' }}</h2>
              <p>欢迎使用Vue3管理系统，祝您开心每一天！</p>
            </div>
          </div>
          <div class="weather-info">
            <div class="date-info">
              <div class="date">{{ new Date().toLocaleDateString() }}</div>
              <div class="time">{{ new Date().toLocaleTimeString() }}</div>
            </div>
            <div class="weather">
              <el-icon><el-icon-sunny /></el-icon>
              <span>晴 25°C</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    
    <el-row :gutter="20">
      <!-- 数据卡片 -->
      <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
        <el-card shadow="hover" class="data-card">
          <div class="data-header">
            <span class="data-title">今日访问</span>
            <el-icon class="data-icon" style="background-color: #409EFF;">
              <el-icon-view />
            </el-icon>
          </div>
          <div class="data-value">{{ workbenchData.todayVisits }}</div>
          <div class="data-footer">
            总访问量 <span>{{ workbenchData.totalVisits }}</span>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
        <el-card shadow="hover" class="data-card">
          <div class="data-header">
            <span class="data-title">未读消息</span>
            <el-icon class="data-icon" style="background-color: #67C23A;">
              <el-icon-message />
            </el-icon>
          </div>
          <div class="data-value">{{ workbenchData.messages }}</div>
          <div class="data-footer">
            <el-link type="primary">查看消息</el-link>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
        <el-card shadow="hover" class="data-card">
          <div class="data-header">
            <span class="data-title">待办事项</span>
            <el-icon class="data-icon" style="background-color: #E6A23C;">
              <el-icon-document-checked />
            </el-icon>
          </div>
          <div class="data-value">{{ workbenchData.todos }}</div>
          <div class="data-footer">
            <el-progress :percentage="workbenchData.taskProgress" />
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
        <el-card shadow="hover" class="data-card">
          <div class="data-header">
            <span class="data-title">系统通知</span>
            <el-icon class="data-icon" style="background-color: #F56C6C;">
              <el-icon-bell />
            </el-icon>
          </div>
          <div class="data-value">{{ workbenchData.systemNotice }}</div>
          <div class="data-footer">
            <el-link type="primary">查看通知</el-link>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20">
      <!-- 快捷操作菜单 -->
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
            </div>
          </template>
          <div class="quick-menus">
            <div class="quick-menu-item" v-for="(menu, index) in quickMenus" :key="index">
              <el-icon :style="{ color: menu.color }" class="quick-menu-icon">
                <component :is="menu.icon" />
              </el-icon>
              <span class="quick-menu-name">{{ menu.name }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20">
      <!-- 待办事项 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card shadow="hover" class="todo-card">
          <template #header>
            <div class="card-header">
              <span>待办事项</span>
              <el-button text>查看更多</el-button>
            </div>
          </template>
          <el-scrollbar height="300px">
            <el-empty v-if="todoList.length === 0" description="暂无待办事项" />
            <div v-else class="todo-list">
              <div v-for="todo in todoList" :key="todo.id" class="todo-item">
                <el-checkbox v-model="todo.status" @change="() => toggleTodoStatus(todo)">
                  <span :class="{ 'todo-completed': todo.status }">{{ todo.title }}</span>
                </el-checkbox>
                <span class="todo-date">{{ todo.date }}</span>
              </div>
            </div>
          </el-scrollbar>
        </el-card>
      </el-col>
      
      <!-- 系统公告 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card shadow="hover" class="notice-card">
          <template #header>
            <div class="card-header">
              <span>系统公告</span>
              <el-button text>查看更多</el-button>
            </div>
          </template>
          <el-scrollbar height="300px">
            <el-empty v-if="noticeList.length === 0" description="暂无系统公告" />
            <div v-else class="notice-list">
              <div v-for="notice in noticeList" :key="notice.id" class="notice-item">
                <div class="notice-title">
                  <el-icon><el-icon-info-filled /></el-icon>
                  <span>{{ notice.title }}</span>
                </div>
                <span class="notice-date">{{ notice.date }}</span>
              </div>
            </div>
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="less" scoped>
.dashboard-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  
  .el-row {
    width: 100%;
    margin-bottom: 20px !important;
    
    &:last-child {
      margin-bottom: 0 !important;
    }
  }
  
  .welcome-card {
    height: 120px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .welcome-info {
      display: flex;
      align-items: center;
      
      .welcome-text {
        margin-left: 20px;
        
        h2 {
          margin: 0;
          font-size: 20px;
          margin-bottom: 10px;
        }
        
        p {
          margin: 0;
          color: #909399;
        }
      }
    }
    
    .weather-info {
      text-align: right;
      
      .date-info {
        margin-bottom: 10px;
        
        .date {
          font-size: 14px;
          color: #303133;
          margin-bottom: 5px;
        }
        
        .time {
          font-size: 12px;
          color: #909399;
        }
      }
      
      .weather {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        
        .el-icon {
          color: #E6A23C;
          font-size: 18px;
          margin-right: 5px;
        }
      }
    }
  }
  
  .data-card {
    height: 180px;
    margin-bottom: 0;
    
    .data-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      .data-title {
        font-size: 16px;
        color: #606266;
      }
      
      .data-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #fff;
      }
    }
    
    .data-value {
      font-size: 28px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 20px;
    }
    
    .data-footer {
      font-size: 12px;
      color: #909399;
      
      span {
        color: #409EFF;
        margin-left: 5px;
      }
    }
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    span {
      font-weight: bold;
    }
  }
  
  .quick-menus {
    display: flex;
    flex-wrap: wrap;
    
    .quick-menu-item {
      width: 16.666%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0;
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        background-color: #f5f7fa;
      }
      
      .quick-menu-icon {
        font-size: 30px;
        margin-bottom: 10px;
      }
      
      .quick-menu-name {
        font-size: 14px;
      }
    }
  }
  
  .todo-card, .notice-card {
    height: 400px;
    
    .el-scrollbar {
      height: calc(100% - 30px);
    }
  }
  
  .todo-list {
    .todo-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #ebeef5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .todo-completed {
        color: #909399;
        text-decoration: line-through;
      }
      
      .todo-date {
        font-size: 12px;
        color: #909399;
      }
    }
  }
  
  .notice-list {
    .notice-item {
      padding: 12px 0;
      border-bottom: 1px solid #ebeef5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .notice-title {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        
        .el-icon {
          color: #409EFF;
          margin-right: 5px;
        }
        
        span {
          font-size: 14px;
          color: #303133;
        }
      }
      
      .notice-date {
        font-size: 12px;
        color: #909399;
        margin-left: 20px;
      }
    }
  }
  
  @media (max-width: 768px) {
    .quick-menus {
      .quick-menu-item {
        width: 33.333%;
      }
    }
  }
}
</style> 